<template>
  <el-row class="block">
    <el-col :span="6" class="rate">
      <div class="avg">{{ rateAvg }}</div>
      <el-rate v-if="disabled" class="star" @change="handleChange" v-model="params.score"></el-rate>
    </el-col>
    <el-col :span="18" class="rateCount">
      <el-row>
        <el-col :span="8">
          <div class="disabledStar" v-for="(count,index) in [5,4,3,2,1]" :key="index" style="display: flex;flex-direction: row-reverse;">
            <el-rate disabled :max="count"></el-rate>
          </div>
        </el-col>
        <el-col :span="16">
          <el-row v-for="(item,index)  in rateCountList" :key="index" class="progress">
            <el-col :span="18">
              <el-progress :show-text="false" :percentage="rateAllCount==0 ? 0 : item*100/rateAllCount"></el-progress>
            </el-col>
            <el-col :span="6">{{ item }}</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { rate, rateAvg, rateCount } from '@/api/rate'

export default {
  name: 'rate',
  props: ['detail',"disabled"],
  data() {
    return {
      params: {
        score: null,
        userId: this.$store.state.user.id,
        bookId: this.detail.bookId
      },
      rateAvg: 0,
      rateCountList: {},
      rateAllCount: 0
    }
  },
  mounted() {
    this.getRateAvg()
    this.getRateCountList()
  },
  methods: {
    handleChange() {
      this.getRate()
    },
    getRate() {
      rate(this.params).then(() => {
        this.getRateCountList()
        this.getRateAvg()
        this.$message('评分成功')
      })
    },
    getRateAvg() {
      rateAvg({bookId:this.detail.bookId}).then(res => {
        this.rateAvg = res.data.toFixed(2)
      }).catch(()=>{
        this.rateAvg=0
      })
    },
    getRateCountList() {
      rateCount({bookId:this.detail.bookId}).then(res => {
        this.rateCountList = res.data
        res.data.map(i => {
          this.rateAllCount += i
        })
      })
    }
  }
}
</script>

<style scoped>
.block {
  display: flex;
}

.rate {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.avg {
  align-content: center;
  font-size: 36px;
}

.progress {
  display: flex;
  align-items: center;
  margin-bottom: -5px;
  height: 20px;
  margin-left: 5px;
}

.disabledStar {
  margin-bottom: -5px;
}

::v-deep .disabledStar .el-rate__icon {
  color: #777777 !important;
}

::v-deep .el-rate__icon {
  font-size: 14px !important;
  margin-right: 0;
}
</style>
